import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'mobx-react';
import { createHashHistory } from 'history';
import { Router, Route, useRouterHistory } from 'react-router';
import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';

import weaPortal from 'weaPortal';

const routing = new RouterStore();
const allStore = { routing, ...weaPortal.store };

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

const history = syncHistoryWithStore(browserHistory, routing);
window.weaHistory = history;

const Root = () => (
  <Provider ecId={`${(this && this.props && this.props.ecId) || ''}_Provider@pwzprj`} {...allStore}>
    <Router ecId={`${(this && this.props && this.props.ecId) || ''}_Router@mvrjpr`} history={history}>
      <Route ecId={`${(this && this.props && this.props.ecId) || ''}_Route@ev9xiu`} path="/main" component={(props) => props.children}>
        {weaPortal.Route}
      </Route>
    </Router>
  </Provider>
);

ReactDOM.render(<Root ecId={`${(this && this.props && this.props.ecId) || ''}_Root@9v0gtx`} />, document.getElementById('container'));
